<!-- 时令设置 -->
<template>
  <div class="time-setting">
    <el-form ref="form" :model="formData">
      <div class="title-box">
        <div class="title">
          <span>时令设置</span>
          <slot name="isdefault"></slot>
          <el-tooltip class="item" effect="dark" content="默认时令：在机房号源模板设置时使用默认时令设置的数据" placement="top-start">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <span class="right-title" @click="importData">从{{seasonName === 'summer' ? '冬令时':'夏令时'}}复制班次</span>
        </div>
        <div class="one-block">
          <el-form-item label="日期设置" label-width="78px" prop="seasonDate" :rules="rules.seasonDate">
            <el-date-picker
              v-model="formData.seasonDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="MM 月 dd 日"
              value-format="MM-dd"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="one-block title-set">
          <el-form-item label="班次设置" label-width="78px">
            <el-button type="primary" size="small" @click="addClasses"><i class="el-icon-plus icon"></i>添加班次</el-button>
          </el-form-item>
          <!-- <span class="title">班次设置</span><span class="classes-add" @click="addClasses"><i class="el-icon-plus icon"></i>添加班次</span> -->
        </div>
      </div>
      <div class="classes-setting" v-for="(obj,i) in formData.timeLists" :key="i">
        <el-form-item class="one-block classes-setting-top" label="班次名称" label-width="78px" :prop="'timeLists.'+i+'.name'" :rules="rules.name">
          <el-input v-model.trim="obj.name" placeholder="请输入"></el-input>
          <span v-if="formData.timeLists.length>1" class="delete-button" @click="deleteClasses(i)"><i class="el-icon-delete icon"></i>删除</span>
        </el-form-item>
        <div class="classes-setting-main">
          <div class="setting-main_content">
            <el-form-item label-width="70px" label="时间段:" :prop="'timeLists.'+i+'.amTimes[0]'" :rules="rules.amTimes">
              <el-time-select
                placeholder="起始时间"
                v-model="obj.amTimes[0]"
                :picker-options="{
                  start: '00:00',
                  step: defaultStepTime,
                  end: '24:00'
                }"
                @change="timeChange($event,obj,'start')">
              </el-time-select>
            </el-form-item>
            <el-form-item :prop="'timeLists.'+i+'.amTimes[1]'" :rules="rules.amTimes">
              <el-time-select
                placeholder="结束时间"
                v-model="obj.amTimes[1]"
                :picker-options="{
                  start: '00:00',
                  step: defaultStepTime,
                  end: '24:00',
                  minTime: obj.amTimes[0]
                }"
                @change="timeChange($event,obj,'end')">
              </el-time-select>
            </el-form-item>
          </div>
          <div class="number-setting">
            <div class="number-title">起始号码：</div>
            <div class="number-main">
              <div class="one-number" v-for="(item,index) in obj.numberSettings" :key="index">
                <!-- <el-form-item label="前缀：" label-width="60px" class="one-block light-form-item" :prop="'timeLists.'+i+'.numberSettings.'+index+'.preKey'">
                  <el-input class="text-input" v-model="item.preKey"></el-input>
                </el-form-item> -->
                <el-form-item label="起始号码：" label-width="100px" class="one-block light-form-item" :prop="'timeLists.'+i+'.numberSettings.'+index+'.startNum'" :rules="rules.startNum">
                  <el-input class="text-input" v-model.number="item.startNum"></el-input>
                </el-form-item>
                <el-form-item label="起始时间：" label-width="100px" class="one-block light-form-item" :prop="'timeLists.'+i+'.numberSettings.'+index+'.startTime'" :rules="rules.numberTimes">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="item.startTime"
                    :picker-options="{
                      start: '00:00',
                      step: defaultStepTime,
                      end: '24:00'
                    }">
                  </el-time-select>
                </el-form-item>
                <el-form-item label="结束时间：" label-width="100px" class="one-block light-form-item" :prop="'timeLists.'+i+'.numberSettings.'+index+'.endTime'" :rules="rules.numberTimes">
                  <el-time-select
                    placeholder="结束时间"
                    v-model="item.endTime"
                    :picker-options="{
                      start: '00:00',
                      step: defaultStepTime,
                      end: '24:00'
                    }">
                  </el-time-select>
                </el-form-item>
                <div class="delete-class" v-if="obj.numberSettings.length>1" @click="deleteList(i,index)">删除</div>
              </div>
              <span class="other-button" @click="addList(i)"><i class="el-icon-plus icon"></i>添加额外起始号码</span>
            </div>
          </div>
          <div class="one-block">
            <el-form-item label="默认排班时间(分钟)：" label-width="158px" :prop="'timeLists.'+i+'.defaultMinute'" :rules="rules.defaultMinute">
              <el-input class="time-picker" v-model.number="obj.defaultMinute"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'TimeSetting',
  mixins: [],
  components: {},
  props: {
    seasonObj: {
      Object,
      default: () => {}
    },
    seasonName: {
      String,
      default: ''
    }
  },
  data() {
    return {
      isDefault: false,
      defaultStepTime: window.g.DEFAULTSTEPTIME || '00:30',
      seasonDate: ['', ''],
      timeLists: [],
      formData: {
        timeLists: [],
        seasonDate: ['', '']
      },
      amTimes: ['', ''],
      amNumberList: [
        {
          preKey: '',
          startNum: '',
          startTime: '',
          endTime: ''
        }
      ],
      amDefaultMinute: 30,
      pmTimes: ['', ''],
      pmNumberList: [
        {
          preKey: '',
          startNum: '',
          startTime: '',
          endTime: ''
        }
      ],
      pmDefaultMinute: 30,
      rules: {
        seasonDate: [
          { required: true, message: '请输入时令设置', trigger: ['blur', 'change'] },
          { validator: this.seasonDateValidator, trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '请输入班次名称', trigger: ['blur', 'change'] },
          { validator: this.nameValidator, trigger: ['blur', 'change'] }
        ],
        defaultMinute: [{ required: true, message: '请输入默认排班时间', trigger: ['blur', 'change'] }],
        numberTimes: [
          { required: true, message: '请选择时间', trigger: ['blur', 'change'] },
          { validator: this.numberTimeValidator, trigger: ['blur', 'change'] }
        ],
        amTimes: [
          { required: true, message: '请选择时间', trigger: ['blur', 'change'] },
          { validator: this.timeValidator, trigger: ['blur', 'change'] }
        ],
        startNum: [{ required: true, message: '起始号码必填', trigger: ['blur', 'change'] }]
      }
    }
  },
  watch: {
    seasonObj: {
      handler(val) {
        if (val) {
          this.formData.seasonDate = [val.startMonth + '-' + val.startDay, val.endMonth + '-' + val.endDay]
          this.isDefault = val.isDefault

          this.timeLists = []
          for (let k in val.checkClassSettings) {
            let obj = val.checkClassSettings[k]
            this.$set(obj, 'name', k)
            let startMinute = obj.startHour + ':' + obj.startMinute === '23:59' ? '00' : obj.startMinute < 10 ? '0' + obj.startMinute : obj.startMinute
            let endMinute = obj.endHour + ':' + obj.endMinute === '23:59' ? '00' : obj.endMinute < 10 ? '0' + obj.endMinute : obj.endMinute
            let startHour = obj.startHour + ':' + obj.startMinute === '23:59' ? '24' : obj.startHour < 10 ? '0' + obj.startHour : obj.startHour
            let endHour = obj.endHour + ':' + obj.endMinute === '23:59' ? '24' : obj.endHour < 10 ? '0' + obj.endHour : obj.endHour
            this.$set(obj, 'amTimes', [startHour + ':' + startMinute, endHour + ':' + endMinute])
            for (let j = 0; j < obj.numberSettings.length; j++) {
              let odata = obj.numberSettings[j]
              let osm = odata.startHour + ':' + odata.startMinute === '23:59' ? '00' : odata.startMinute < 10 ? '0' + odata.startMinute : odata.startMinute
              let esm = odata.endHour + ':' + odata.endMinute === '23:59' ? '00' : odata.endMinute < 10 ? '0' + odata.endMinute : odata.endMinute
              let osh = odata.startHour + ':' + odata.startMinute === '23:59' ? '24' : odata.startHour < 10 ? '0' + odata.startHour : odata.startHour
              let oeh = odata.endHour + ':' + odata.endMinute === '23:59' ? '24' : odata.endHour < 10 ? '0' + odata.endHour : odata.endHour
              this.$set(odata, 'startTime', osh + ':' + osm)
              this.$set(odata, 'endTime', oeh + ':' + esm)
            }
            this.timeLists.push(obj)
          }
          this.timeLists.sort((a, b) => {
            return a.startHour - b.startHour
          })
          this.formData.timeLists = this.timeLists
        } else {
          this.formData = {
            timeLists: [],
            seasonDate: ['', '']
          }
        }
      },
      immediate: false
    }
  },
  computed: {
    appConfig() {
      return this.$store.state.settings.appConfig
    },
    ISUSE_DEFAULTSTEPTIME() {
      return (this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.ISUSE_DEFAULTSTEPTIME) || window.g.ISUSE_DEFAULTSTEPTIME || false
    }
  },
  created() {
    let appConfig = this.$store.state.settings.appConfig
    if (this.ISUSE_DEFAULTSTEPTIME) {
      this.defaultStepTime = (appConfig && appConfig.baseConfig && appConfig.baseConfig.DEFAULTSTEPTIME) || window.g.DEFAULTSTEPTIME || '00:30'
    }
  },
  mounted() {
  },
  methods: {
    timeValidator(rule, value, callback) {
      let index = rule.field.split('.')[1]
      if (this.formData.timeLists[index].amTimes[0] >= this.formData.timeLists[index].amTimes[1]) {
        callback(new Error('开始时间不得大于结束时间'))
      } else {
        callback()
      }
    },
    numberTimeValidator(rule, value, callback) {
      let index = rule.field.split('.')[1]
      let i = rule.field.split('.')[3]
      if (this.formData.timeLists[index].numberSettings[i].startTime >= this.formData.timeLists[index].numberSettings[i].endTime) {
        callback(new Error('开始时间不得大于结束时间'))
      } else {
        callback()
      }
    },
    nameValidator(rule, value, callback) {
      for (let i = 0; i < this.formData.timeLists.length; i++) {
        for (let j = i + 1; j < this.formData.timeLists.length; j++) {
          if (this.formData.timeLists[i].name === this.formData.timeLists[j].name) {
            return callback(new Error('班次名称不能重复'))
          }
        }
      }
      return callback()
    },
    seasonDateValidator(rule, value, callback) {
      if (!value || !value[0] || !value[1]) {
        callback(new Error('时令设置不能为空'))
      } else {
        callback()
      }
    },
    addList(i) {
      let obj = {
        preKey: '',
        startNum: '',
        startTime: '',
        endTime: ''
      }
      this.formData.timeLists[i].numberSettings.push(obj)
    },
    deleteList(i, index) {
      this.formData.timeLists[i].numberSettings.splice(index, 1)
    },
    isValidate(callback) {
      if (!this.formData.timeLists || this.formData.timeLists.length === 0) {
        this.$message.warning('请添加班次')
        callback(false)
      } else {
        this.$refs.form.validate((valid, object) => {
          if (valid) {
            callback(true)
          } else {
            callback(false)
            this.timeout01 = setTimeout(() => {
              var isError = document.getElementsByClassName('is-error')
              isError[0].querySelector('input').focus()
            }, 100)
            for (let k in object) {
              this.$message.warning(object[k][0].message)
              return
            }
          }
        })
      }
    },
    addClasses() {
      let obj = {
        startHour: 0,
        startMinute: 0,
        endHour: 0,
        endMinute: 0,
        defaultMinute: '',
        amTimes: ['', ''],
        numberSettings: [
          {
            startHour: 0,
            startMinute: 0,
            startTime: '',
            endTime: '',
            endHour: 0,
            endMinute: 0,
            preKey: '',
            startNum: ''
          }
        ]
      }
      this.formData.timeLists.push(obj)
      this.$nextTick(() => {
        window.scrollTo(0, document.body.scrollHeight)
      })
    },
    deleteClasses(index) {
      this.formData.timeLists.splice(index, 1)
    },
    timeChange(time, obj, type) {
      if (type === 'start') {
        if (obj.numberSettings && obj.numberSettings.length > 0) {
          obj.numberSettings.forEach((e) => {
            if (!e.startTime) {
              e.startTime = time
            }
          })
        }
      } else {
        if (obj.numberSettings && obj.numberSettings.length > 0) {
          obj.numberSettings.forEach((e) => {
            if (!e.endTime) {
              e.endTime = time
            }
          })
        }
      }
    },
    importData() {
      this.$emit('importData')
    }
  },
  beforeDestroy() {
    this.timeout01 && clearTimeout(this.timeout01)
  },
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.time-setting{
  width:100%;
  height:100%;
  padding: 0 16px;
  min-width: 960px;
  .title-box{
      padding:0 20px;
  }
  .icon{
          margin-right: 5px;
      }
  .classes-add{
      color:rgb(0, 204, 255);
      cursor: pointer;
      margin-left: 10px;
  }
  .el-input{
      width: 170px;
  }
  .time-title{
      width: 95px;
      display: inline-block;
  }
  .title{
    font-size: 14px;
    font-weight: 600;
    font-family: PingFangSC-Medium, PingFang SC;
    color: rgba(0, 0, 0, 0.85);
    margin: 10px 0px;
    .right-title{
      float: right;
      cursor: pointer;
      color: rgb(0, 204, 255);
      font-weight: 500;
    }
  }
  .title-set{
    margin:10px 0px;
  }
  .classes-setting{
    margin-bottom: 10px;
    border: 1px solid #E9E9E9;
    position: relative;
    .classes-setting-top{
      border-bottom: 1px solid #E9E9E9;
      padding: 5px 20px;
      background: #fafafa;
      position: relative;
    }
    .classes-setting-main{
      padding: 0px 20px;
      .setting-main_name{
        margin-bottom: 10px;
      }
      .setting-main_content{
        display: flex;
        align-items: flex-end;
        .el-form-item:first-child{
            margin-right: 5px;
        }
      }
    }
    .number-setting{
      width:100%;
      height:100%;
      padding:10px 0px;
      .one-number{
          display: flex;
          width:100%;
          margin: 10px 0;
          .text-input{
              width:75px;
          }
          .delete-class{
              color:red;
              cursor: pointer;
              line-height: 40px;
              margin-left: 5px;
          }
          .short-block{
              margin-right: 10px;
              /deep/ .el-form-item__content{
                  width: 170px;
              }
          }
          .mini-block{
              /deep/ .el-form-item__content{
                  width: 140px;
              }
          }
          .middle-block{
              /deep/ .el-form-item__content{
                  width: 265px;
              }
          }
          .light-form-item{
              /deep/ .el-form-item__label{
                  color: rgba(0,0,0,.5);
              }
          }
      }
      .number-title{
          margin-bottom: 10px;
          font-weight: 600;
          color: #686a6e;
      }
      .number-main{
          width:100%;
          .other-button{
              color:rgb(0, 204, 255);
              cursor: pointer;
          }
      }
    }
    .delete-button{
      color:red;
      cursor: pointer;
      position: absolute;
      right: 10px;
    }
    .one-block{
      .name{
          width:70px;
          line-height: 40px;
          color: rgba(0, 0, 0, 0.5);
      }
      .short{
          width:55px
      }
      .time-picker{
          width: 110px;
      }
    }
  }
}
.el-input__inner{
  height: 32px;
}
.el-input /deep/ .el-input__inner{
  height: 32px;
}
/deep/ .el-input__icon{
  line-height: 24px;
}
.el-date-editor /deep/.el-range-separator{
  line-height: 28px;
}
.el-date-editor{
  width:360px
}
.el-form{
  .el-form-item{
    margin-bottom: 5px;
  }
}
</style>
